﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>捷阅网后台主页</title>
	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
	<link rel="stylesheet" th:href="@{/lib/admin/home/assets/materialize/css/materialize.min.css}" media="screen,projection" />

	<script th:src="@{/lib/merchant/js/jquery2.0.3.min.js}"></script>
	<script th:src="@{/lib/merchant/js/raphael-min.js}"></script>
	<script th:src="@{/lib/merchant/js/morris.js}"></script>

	<!-- Bootstrap Styles-->
	<link th:href="@{/lib/admin/home/assets/css/bootstrap.css}" rel="stylesheet" />
	<!-- FontAwesome Styles-->
	<link th:href="@{/lib/admin/home/assets/css/font-awesome.css}" rel="stylesheet" />
	<!-- Morris Chart Styles-->
	<link th:href="@{/lib/admin/home/assets/js/morris/morris-0.4.3.min.css}" rel="stylesheet" />
	<!-- Custom Styles-->
	<link th:href="@{/lib/admin/home/assets/css/custom-styles.css}" rel="stylesheet" />
</head>

<body>
<div id="wrapper">
	<div th:include="admin/common/model::nav"></div>

	<div id="page-wrapper">
		<div class="header">
			<h3 class="page-header">
				捷阅网后台管理主页
			</h3>
		</div>
		<div id="page-inner">

			<div class="dashboard-cards">
				<div class="row">
					<div class="col-xs-12 col-sm-6 col-md-3">

						<div class="card horizontal cardIcon waves-effect waves-dark">
							<div class="card-image red">
								<i class="material-icons dp48">import_export</i>
							</div>
							<div class="card-stacked red">
								<div class="card-content">
									<h3>￥[[${profit}]]</h3>
								</div>
								<div class="card-action">
									<strong>商城总收益</strong>
								</div>
							</div>
						</div>

					</div>
					<div class="col-xs-12 col-sm-6 col-md-3">

						<div class="card horizontal cardIcon waves-effect waves-dark">
							<div class="card-image orange">
								<i class="material-icons dp48">shopping_cart</i>
							</div>
							<div class="card-stacked orange">
								<div class="card-content">
									<h3>[[${orderCount}]]</h3>
								</div>
								<div class="card-action">
									<strong>成交订单量</strong>
								</div>
							</div>
						</div>
					</div>
					<div class="col-xs-12 col-sm-6 col-md-3">

						<div class="card horizontal cardIcon waves-effect waves-dark">
							<div class="card-image blue">
								<i class="material-icons dp48">equalizer</i>
							</div>
							<div class="card-stacked blue">
								<div class="card-content">
									<h3>[[${goodsCount}]]</h3>
								</div>
								<div class="card-action">
									<strong>商品总数</strong>
								</div>
							</div>
						</div>

					</div>
					<div class="col-xs-12 col-sm-6 col-md-3">

						<div class="card horizontal cardIcon waves-effect waves-dark">
							<div class="card-image green">
								<i class="material-icons dp48">supervisor_account</i>
							</div>
							<div class="card-stacked green">
								<div class="card-content">
									<h3>[[${userCount}]]</h3>
								</div>
								<div class="card-action">
									<strong>会员总数</strong>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="agile-last-grids">
				<div class="col-md-4 agile-last-left">
					<div class="agile-last-grid">
						<div class="area-grids-heading">
							<h3>月盈利</h3>
						</div>
						<div id="graph7"></div>
						<script>
							// This crosses a DST boundary in the UK.
							Morris.Area({
								element: 'graph7',
								data: [
									{x: '2013-03-30 22:00:00', y: 3, z: 3},
									{x: '2013-03-31 00:00:00', y: 2, z: 0},
									{x: '2013-03-31 02:00:00', y: 0, z: 2},
									{x: '2013-03-31 04:00:00', y: 4, z: 4}
								],
								xkey: 'x',
								ykeys: ['y', 'z'],
								labels: ['Y', 'Z']
							});
						</script>

					</div>
				</div>
				<div class="col-md-4 agile-last-left agile-last-middle">
					<div class="agile-last-grid">
						<div class="area-grids-heading">
							<h3>日盈利</h3>
						</div>
						<div id="graph8"></div>
						<script>
							var day_data = [
								{"period": "2016-10-01", "licensed": 3407, "sorned": 660},
								{"period": "2016-09-30", "licensed": 3351, "sorned": 629},
								{"period": "2016-09-29", "licensed": 3269, "sorned": 618},
								{"period": "2016-09-20", "licensed": 3246, "sorned": 661},
								{"period": "2016-09-19", "licensed": 3257, "sorned": 667},
								{"period": "2016-09-18", "licensed": 3248, "sorned": 627},
								{"period": "2016-09-17", "licensed": 3171, "sorned": 660},
								{"period": "2016-09-16", "licensed": 3171, "sorned": 676},
								{"period": "2016-09-15", "licensed": 3201, "sorned": 656},
								{"period": "2016-09-10", "licensed": 3215, "sorned": 622}
							];
							Morris.Bar({
								element: 'graph8',
								data: day_data,
								xkey: 'period',
								ykeys: ['licensed', 'sorned'],
								labels: ['Licensed', 'SORN'],
								xLabelAngle: 60
							});
						</script>
					</div>
				</div>
				<div class="col-md-4 agile-last-left agile-last-right">
					<div class="agile-last-grid">
						<div class="area-grids-heading">
							<h3>年盈利</h3>
						</div>
						<div id="graph9"></div>
						<script>
							var day_data = [
								{"elapsed": "I", "value": 34},
								{"elapsed": "II", "value": 24},
								{"elapsed": "III", "value": 3},
								{"elapsed": "IV", "value": 12},
								{"elapsed": "V", "value": 13},
								{"elapsed": "VI", "value": 22},
								{"elapsed": "VII", "value": 5},
								{"elapsed": "VIII", "value": 26},
								{"elapsed": "IX", "value": 12},
								{"elapsed": "X", "value": 19}
							];
							Morris.Line({
								element: 'graph9',
								data: day_data,
								xkey: 'elapsed',
								ykeys: ['value'],
								labels: ['value'],
								parseTime: false
							});
						</script>
					</div>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
		<!-- /. PAGE INNER  -->
	</div>
	<!-- /. PAGE WRAPPER  -->
</div>
<!-- /. WRAPPER  -->
<!-- JS Scripts-->
<!-- jQuery Js -->
<script th:src="@{/lib/admin/home/assets/js/jquery-1.10.2.js}"></script>

<!-- Bootstrap Js -->
<script th:src="@{/lib/admin/home/assets/js/bootstrap.min.js}"></script>

<script th:src="@{/lib/admin/home/assets/materialize/js/materialize.min.js}"></script>

<!-- Metis Menu Js -->
<script th:src="@{/lib/admin/home/assets/js/jquery.metisMenu.js}"></script>
<!-- Morris Chart Js -->
<script th:src="@{/lib/admin/home/assets/js/morris/raphael-2.1.0.min.js}"></script>
<script th:src="@{/lib/admin/home/assets/js/morris/morris.js}"></script>


<script th:src="@{/lib/admin/home/assets/js/easypiechart.js}"></script>
<script th:src="@{/lib/admin/home/assets/js/easypiechart-data.js}"></script>

<script th:src="@{/lib/admin/home/assets/js/Lightweight-Chart/jquery.chart.js}"></script>

<!-- Custom Js -->
<script th:src="@{/lib/admin/home/assets/js/custom-scripts.js}"></script>


</body>

</html>